﻿@{
    //ViewBag.Title = "出入库记录管理系统";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <style>
        /* 自定义样式 */
        .search-card {
            margin-bottom: 5px;
            border-radius: 4px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
        }

        .search-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f2f2f2;
            background-color: #F8F8F8;
        }

        .search-body {
            padding: 10px;
        }

        .search-btn-group {
            text-align: right;
            margin-top: 5px;
        }

        .table-card {
            border-radius: 4px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
        }

        .table-header {
            padding: 5px 20px;
            border-bottom: 1px solid #f2f2f2;
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .layui-form-label {
            width: 90px;
        }

        .layui-input-inline {
            width: 180px;
        }

        .layui-table-view {
            border-radius: 0 0 4px 4px;
        }

        .badge-in {
            background-color: #5FB878 !important;
        }

        .badge-out {
            background-color: #FF5722 !important;
        }

        .action-btn-group .layui-btn {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div style="padding: 16px">
        <!-- 搜索卡片 -->
        <div class="layui-card search-card">
            <div class="search-header">
                <h3>出入库记录查询</h3>
            </div>
            <div class="layui-card-body search-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><i class="layui-icon layui-icon-date"></i> 日期范围</label>
                            <div class="layui-inline" id="dateRange">
                                <div class="layui-input-inline">
                                    <input type="text" name="startTime" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" name="endTime" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i> 操作人</label>
                            <div class="layui-input-inline">
                                <input type="text" id="operatorSearch" name="operator" placeholder="请输入操作人" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><i class="layui-icon layui-icon-cart"></i> 商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="productSearch" name="productName" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><i class="layui-icon layui-icon-form"></i> 记录类型</label>
                            <div class="layui-input-inline">
                                <select name="recordType" id="typeSelect" lay-search="">
                                    <option value="">全部类型</option>
                                    <option value="1">入库</option>
                                    <option value="0">出库</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item search-btn-group">
                        <button type="button" id="searchBtn" class="layui-btn layui-btn-normal">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" id="resetBtn" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 数据表格卡片 -->
        <div class="layui-card table-card">
            <div class="table-header">
                <i class="layui-icon layui-icon-list"></i> 出入库记录列表
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
    </div>
    <button class="layui-btn layui-btn-xs" lay-event="edit">待审核</button>
    <!-- 操作列模板 -->
    <script type="text/html" id="barDemo1">
        <div class="layui-clear-space">
            {{# if(d.VerifyId==null){}}
            <button class="layui-btn layui-btn-xs" lay-event="edit">待审核</button>
            {{# } }}
        </div>
    </script>

    <!-- 类型列模板 -->
    <script type="text/html" id="typeTpl">
        {{#  if(d.Type == 1){ }}
        <span class="layui-badge badge-in">入库</span>
        {{#  } else { }}
        <span class="layui-badge badge-out">出库</span>
        {{#  } }}
    </script>
    <script>
        layui.use(['table', 'util', 'layer', 'laydate', 'form'], function () {
            var table = layui.table;
            var util = layui.util;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var form = layui.form;
            var $ = layui.jquery;

            // 初始化日期范围选择器
            laydate.render({
                elem: '#dateRange',
                range: ['#startDate', '#endDate'],
                format: 'yyyy-MM-dd',
                theme: '#5FB878'
            });

            // 初始化表格
            table.render({
                elem: '#dataTable',
                id: 'dataTable',
                url: '/Product/InOutContent',
                defaultToolbar: [],
                height: 'full-220',
                loading: true,
                page: {
                    limit: 10
                },
                cols: [[
                    { field: 'Id', title: 'ID', width: 80, sort: true },
                    { field: 'ProductName', title: '商品名称', minWidth: 150 },
                    { field: 'Number', title: '数量', width: 100, sort: true },
                    { field: 'Type', title: '类型', width: 100, templet: '#typeTpl' },
                    { field: 'Name', title: '操作人', width: 120 },
                    { field: 'ApplyName', title: '接收人', width: 120 },
                    { field: 'ContractNumber', title: '合同编号', width: 180 },
                    { field: 'ParturientName', title: '产妇姓名', width: 120 },
                    
                    {
                        field: 'InboundTime',
                        title: '操作时间',
                        width: 180,
                        templet: function (d) {
                            return util.toDateString(d.InboundTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd HH:mm:ss');
                        },
                        sort: true
                    },
                    {
                        fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barDemo1'
                    }
                ]],
            });

            // 搜索按钮点击事件
            $('#searchBtn').on('click', function () {
                var startDate = $('#startDate').val();
                var endDate = $('#endDate').val();
                var operator = $('#operatorSearch').val();
                var productName = $('#productSearch').val();
                var recordType = $('#typeSelect').val();

                // 重载表格数据
                table.reload('dataTable', {
                    where: {
                        startTime: startDate,
                        endTime: endDate,
                        ApplyName: operator,
                        ProductName: productName,
                        Type: recordType
                    },
                });
            });

            // 重置按钮点击事件
            $('#resetBtn').on('click', function () {
                $('.layui-input').val('');
                $('#typeSelect').val('');
                form.render('select');

                table.reload('dataTable', {
                    where: {
                        startTime: '',
                        endTime: '',
                        ApplyName: '',
                        ProductName: '',
                        Type: ''
                    },
                });
            });

            // 单元格工具事件
            //table.on("tool(dataTable)", function (obj) {
            //    var data = obj.data;
            //    console.log(data)
            //    if (obj.event === "edit") {
            //        $.post("/Product/verify/" + data.Id, function (resp) {
            //            console.log(resp)
            //            layer.msg('审核成功');
            //            table.reload('dataTable')

            //        })
            //    }
            //});
            //// 监听行工具事件
            table.on('tool(dataTable)', function (obj) {
                var data = obj.data;
                console.log(data);
                if (obj.event === 'edit') {
                    layer.confirm('确定要审核该记录吗？', { icon: 3, title: '提示' }, function (index) {
                        $.ajax({
                            url: '/product/verify',
                            type: 'POST',
                            data: { Id:data.Id},
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg('审核成功', { icon: 1 });
                                    table.reload('dataTable');
                                } else {
                                    layer.msg(res.msg || '审核失败', { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.msg('请求失败', { icon: 2 });
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html>